<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body,
        html {
            margin: 0;
            widows: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="map" style="width:100%;height:100%"></div>
    <script src="./js/jquery-1.10.2.js"></script>
    <script src="./js/echartsMap.min.js"></script>
    <script>
        $(function () {
            showMap()

            function showMap() {
                $.ajax({
                    url: './sichuan.json',
                    success: function (res) {
                        var myChart = echarts.init(document.getElementById('map'));
                        echarts.registerMap('henan', res)
                        myChart.setOption({
                            tooltip: {
                                trigger: 'item',
                                formatter: '{b}'
                                // formatter: function (params) {
                                //     return params.name + "：" + params.data.value
                                //     // return params.name + "抽样" + params.data.check + "家<br/>其中不合格" + params.data.value + "家"
                                // }
                            },
                            legend: {},

                            series: [{
                                name: '',
                                type: 'map',
                                zoom: 1.2,

                                roam: true, //鼠标可拖动
                                // aspectScale: 1.3,
                                showLegendSymbol: true,

                                // selectedMode:'single',
                                map: 'henan',
                                label: {
                                    normal: {
                                        show: true
                                    }
                                },
                                // itemStyle: {
                                //     normal: {
                                //         areaColor: '#ff7e22',
                                //         borderColor: '#fff',
                                //         color: '#0E7BD7'
                                //     },
                                //     emphasis: {
                                //         areaColor: '#e74710'
                                //     }
                                // },
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true
                                        },
                                        show: true,
                                        areaColor: '#DCEEE3',
                                        borderColor: '#fff'
                                    },
                                    emphasis: {
                                        label: {
                                            show: true
                                        },
                                        areaColor: '#069869'
                                    }
                                },

                                data: [{
                                    name: '甘孜藏族自治州',
                                    value: 0

                                }, {
                                    name: '阿坝藏族羌族自治州',
                                    value: 0

                                }, {
                                    name: '雅安市',
                                    value: 0

                                }, {
                                    name: '成都市',
                                    value: 0

                                }, {
                                    name: '攀枝花市',
                                    value: 0

                                }, {
                                    name: '凉山彝族自治州',
                                    value: 0

                                }, {
                                    name: '乐山市',
                                    value: 0

                                }, {
                                    name: '眉山市',
                                    value: 0

                                }, {
                                    name: '德阳市',
                                    value: 0

                                }, {
                                    name: '绵阳市',
                                    value: 0

                                }, {
                                    name: '广元市',
                                    value: 0

                                }, {
                                    name: '巴中市',
                                    value: 0

                                }, {
                                    name: '南充市',
                                    value: 0

                                }, {
                                    name: '遂宁市',
                                    value: 0

                                }, {
                                    name: '资阳市',
                                    value: 0

                                }, {
                                    name: '内江市',
                                    value: 0

                                }, {
                                    name: '自贡市',
                                    value: 0

                                }, {
                                    name: '宜宾市',
                                    value: 0

                                }, {
                                    name: '泸州市',
                                    value: 0

                                }, {
                                    name: '广安市',
                                    value: 0

                                }, {
                                    name: '达州市',
                                    value: 0

                                }]
                            }]
                        });
                        myChart.on('click', function (params) {
                            console.log(params)
                        })
                        $(window).on('resize', function () {
                            myChart.resize();
                        })
                    }
                })


            }
        })
    </script>
</body>

</html>